<template>
  <section class="optionsBox">
    <div class="wrapper">
      <!-- 信息栏 -->
      <div class="info-col">
          <h2>
              <svg t="1660957928450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1859" width="27" height="27"><path d="M256 722.56l64-64v90.88l-73.6 72.96L192 800V640H96L64 608v-512l32-32h768l32 32V384h-64V128H128v448h96l32 32v114.56zM658.56 832l119.04 118.4 54.4-22.4V832h96l32-32v-320l-32-32h-512l-32 32v320l32 32h242.56z m13.44-64H448V512h448v256h-96l-32 32v50.56l-73.6-72.96-22.4-9.6z" p-id="1860" fill="#ffffff"></path></svg>
              评论设置
          </h2>
          
      </div>

      <!-- 设置栏目 -->
      <div class="inputBox">
        <ul class="input-items">
          <li class="input-item">
            <span class="siteName">评论日期格式</span>
            <input type="text">
            <span class="siteDesc">用户评论的日期显示格式</span>
          </li>

          <li class="input-item">
            <span class="siteName">用户回复</span>

            <div class="radioBox">
              <input type="radio" name="allowReg" id="allowReg-0" :value="false" v-model="reply">
              <label for="allowReg-0" style="margin-right:20px">不允许</label>
              <input type="radio" name="allowReg" id="allowReg-1" :value="true"  v-model="reply">
              <label for="allowReg-1">允许</label>
            </div>

            <span class="siteDesc">普通用户是否可以使用禁止按钮禁止他人回复自己发出评论</span>
          </li>

          <li class="input-item">
            <span class="siteName">评论显示</span>

            <div class="checkBox">
              <div class="check">
                <input type="checkbox" name="allowReg" id="allowReg-0" :value="false" v-model="showSiteUrl">
                <label for="allowReg-0" style="margin-right:20px">评论者名称显示时自动加上其个人主页链接</label>
              </div>

              <div class="check">
                <input disabled type="checkbox" name="allowReg" id="allowReg-1" :value="true"  v-model="showGravatar">
                <label for="allowReg-1">启用Gravatar头像服务，最高显示评级为 <span style="color:#999">G - 普通</span> 的头像</label>
              </div>

              <div class="check">
                <input type="checkbox" name="allowReg" id="allowReg-1" :value="true"  v-model="showPaging">
                <label for="allowReg-1">启用分页，并且每页显示 <input type="text" class="inlineInput" v-model="pagingNum"> 篇评论</label>
              </div>

              <div class="check">
                <input type="checkbox" name="allowReg" id="allowReg-1" :value="true"  v-model="showAllReply">
                <label for="allowReg-1">启用评论回复，最多可回复层数为 <input type="text" class="inlineInput" v-model="maxReplyNum"> 层</label>
              </div>

              <div class="check">
                
                将 <select v-model="sort">
                    <option :value="-1">较新的</option>
                    <option :value="1">较旧的</option>
                  </select> 评论显示在前面
              </div>
            </div>
          </li>

          <li class="input-item">
            <span class="siteName">评论限制</span>

            <div class="checkBox">
              <div class="check">
                <input type="checkbox" name="allowReg" id="allowReg-0" :value="false" v-model="auditComment">
                <label for="allowReg-0" style="margin-right:20px">所有评论必须经过审核</label>
              </div>

              <div class="check">
                <input type="checkbox" name="allowReg" id="allowReg-1" :value="true"  v-model="auditEmail">
                <label for="allowReg-1">必须填写邮箱</label>
              </div>

              <div class="check">
                <input type="checkbox" name="allowReg" id="allowReg-1" :value="false"  v-model="auditSiteUrl">
                <label for="allowReg-1">必须填写网址</label>
              </div>

              <div class="check">
                同一IP发布评论的时间间隔限制为为 <input type="text" class="inlineInput" v-model="auditTimer"> 分钟
              </div>

            </div>
          </li>
        </ul>
      </div>

      <div class="saveBox">
        <button class="btn-base btn-save" @click="save">save</button>
      </div>
    </div>
  </section>
</template>

<script>
import {getOptions, updateOptions} from '@/request/optionsApi'
export default {
  name: 'OptionsGeneral',
  data() {
    return {
      user: '',
      reply: true,        // 启用用户回复
      showSiteUrl: true,  // 启用显示用户主页链接
      showGravatar: false,// 启用Gravater头像服务
      showPaging: true,   // 启用分页
      pagingNum: 5,       // 分页数量
      showAllReply: true, // 启用文章回复功能
      maxReplyNum: 5,     // 最大回复数量
      sort: 1,            // 排序方式，-1逆序

      auditComment: true, // 评论需要审核
      auditEmail: true,   // 必须填写邮箱
      auditSiteUrl: false,   // 必须填写网址
      auditTimer: 1       // 同一IP评论发布间隔时间，单位分钟（作者没有时间间隔）
    }
  },
  methods: {
     // 加载设置
    onLoad() {
      const _options = JSON.parse(sessionStorage.getItem('_options'))
      if(_options) {
        this.reply = _options.reply
        this.showSiteUrl = _options.showSiteUrl
        this.showGravatar = _options.showGravatar
        this.showPaging = _options.showPaging
        this.pagingNum = _options.pagingNum
        this.showAllReply = _options.showAllReply
        this.maxReplyNum = _options.maxReplyNum
        this.sort = _options.sort
        this.auditComment = _options.auditComment
        this.auditEmail = _options.auditEmail
        this.auditSiteUrl = _options.auditSiteUrl
        this.auditTimer = _options.auditTimer
        return 
      }

      getOptions({username: this.user.username}).then(result=>{
        this.reply = result.data.reply
        this.showSiteUrl = result.data.showSiteUrl
        this.showGravatar = result.data.showGravatar
        this.showPaging = result.data.showPaging
        this.pagingNum = result.data.pagingNum
        this.showAllReply = result.data.showAllReply
        this.maxReplyNum = result.data.maxReplyNum
        this.sort = result.data.sort
        this.auditComment = result.data.auditComment
        this.auditEmail = result.data.auditEmail
        this.auditSiteUrl = result.data.auditSiteUrl
        this.auditTimer = result.data.auditTimer

        sessionStorage.setItem('_options', JSON.stringify(result.data))
      })
    },
    // 保存，更新设置
    save() {
      updateOptions({
        username: this.user.username,
        options: {
          reply: this.reply,
          showSiteUrl: this.showSiteUrl,
          showGravatar: this.showGravatar,
          showPaging: this.showPaging,
          pagingNum: this.pagingNum,
          showAllReply: this.showAllReply,
          maxReplyNum: this.maxReplyNum,
          sort: this.sort,
          auditComment: this.auditComment,
          auditEmail: this.auditEmail,
          auditSiteUrl: this.auditSiteUrl,
          auditTimer: this.auditTimer,
        }
      }).then(result=>{
        if(result.error !== -1) {
          this.$message.success('更新设置成功')

          sessionStorage.removeItem('_options')
        } else {
          this.$message.error(result.msg)
        }
      })
    }

  },
  created() {
    this.user = JSON.parse(this.$store.state.user) || JSON.parse(localStorage.getItem('_user'))
    this.onLoad()
    
  }
}
</script>

<style lang="less" scoped>
.optionsBox {
  color: var(--sm-main-color);
  width: 100%;
//   min-width: 600px;
  padding: 20px 0;
  background: var(--sm-dark-color);
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  overflow-y:hidden;
}

.saveBox {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 999;

  .btn-save {
    height: 25px;    
  }
}

// 标题信息栏
.info-col {
    display: flex;
    width: 100%;
    position: relative;
    // 标题
    h2 {
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--sm-frost-color);
        font-size: 1.2em;
        padding: 2px 7px;
        width: 150px;
        border-radius: 5px;
        box-shadow: 4px 4px 2px rebeccapurple;
    }
}

// 设置栏目
.inputBox {
  margin: 20px 0;

  .input-items {
    padding: 0 30px;

    .input-item {
      margin: 10px 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;

      input[type="text"] {
        height: 30px;
        width: 90%;
        background: transparent;
        outline: none;
        border: 1px solid rgba(88, 88, 88, .7);
        color: white;
        font-weight: bold;
        padding: 0 20px;
      }
      .siteTitle {
        font-weight: bold;
      }
      .siteDesc {
        color: #999;
        font-size: .8em;
      }
      .siteName {
        font-weight: bold;
      }

      .checkBox {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .check {
          font-size: .9rem;

          label {
            margin-left: 5px;

          }
        }
      }
    }
  }

  // 内置输入
  .inlineInput {
    display: inline-block;
    width: 30px !important;
    height: 20px !important;
  } 

  // 内置下拉框
  select {
    outline: none;
    background: transparent;
    color: #eee;
  }
}
</style>